<template>
    <div class="list-cell" @click="goCell(path)">
        <div class="title-img">
            <div class="img">
                <img :src="require('../../../../static/images/' + src)" />
            </div>
            <div class="title">{{title}}</div>
        </div>
        <div class="right">
            <span v-if="tag" class="tag">
                <span>{{ tag }}</span>
            </span>
            <img src="../../../../static/images/arrow-right-ash.png" />
        </div>
    </div>
</template>

<script>
    import { Tag } from 'vant';

    export default {
        name: "operation",
        props:['src','title','tag','path'],
        components:{
            Tag
        },
        mounted() {

        },
        methods:{
            goCell(path){
                this.$router.push(path)
            }
        }

    }
</script>

<style lang="scss" scoped>
    .list-cell{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.4rem 0rem;
        margin: 0rem 1rem;
        border-bottom: .1rem solid #DDDDDD;
        .title-img{
            display: flex;
            .img{
                img{
                    width: 2rem;
                    height: 2rem;
                    margin-right: .2rem;
                    vertical-align: bottom;
                }
            }
            .title{
                padding-left: 1rem;
                color: #333333;
                font-size: 1.6rem;
                position: relative;

                span {
                    position: absolute;
                    top: 0rem;
                    bottom: 0rem;
                    left: 0rem;
                    right: 0rem;
                }
            }
        }
        .right{
            display: flex;
            align-items: center;

            .tag{
                margin-right: 1rem;
                border-radius: 50%;
                width: 1.7rem;
                height: 1.7rem;
                overflow: hidden;
                background-color: #FF0000;
                position: relative;
                display: block;

                span {
                    position: absolute;
                    top: 0rem;
                    bottom: 0rem;
                    left: 0rem;
                    right: 0rem;
                    font-size: 1rem;
                    color: #ffffff;
                    padding-bottom: 1px;

                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }

            img{
                width: 0.6rem;
                height: 1rem;
            }
        }
    }
</style>
